<template>
  <div class="ContentPersonsInfo">
    <div class="header-title">参保人管理</div>
    <div style="margin:20px 0 0 24px">
      <el-radio-group v-model="radio" @change="changeTheme">
        <el-radio-button :label="1">参保人</el-radio-button>
        <el-radio-button :label="2">参保管理</el-radio-button>
      </el-radio-group>
    </div>
    <div v-show='radio === 1' style="margin: 10px 46px 0px 24px;">
      <div style="display:flex;">
        <input v-model="input" placeholder="姓名/身份证号" class="inquire-input">
        <div class="inquire-div" @click="chaxun(input)">查询</div>
        <div class="import-div" @click="xiazai()">导出</div>
      </div>
      <div style="overflow:auto;margin-top:20px">
        <table border="1" cellspacing="0" style="border: none;table-layout: fixed;width:1000px">
          <thead>
            <th width="80px" style="position: sticky;left: 0;">序号</th>
            <th width='100px' style="position: sticky;left: 84px;">姓名</th>
            <th width='180px' style="position: sticky;left: 188px;">证件号码</th>
            <th width='80px'>国籍</th>
            <th width='80px'>性别</th>
            <th width='120px'>手机号码</th>
            <th width='160px'>户籍所在地</th>
            <th width='160px'>户口性质</th>
            <!-- <th>社保状态</th> -->
            <th width='160px'>社保参保地</th>
            <th width='160px'>社保参保年月日</th>
            <th width='160px'>社保基数</th>
            <!-- <th>公积金状态</th> -->
            <th width='160px'>公积金参保地</th>
            <th width='160px'>公积金参保年月</th>
            <th width='160px'>公积金基数</th>
            <!-- <th width='160px'>公积金比例</th> -->
            <!-- <th>商保状态</th> -->
            <th width='160px'>商保方案</th>
            <th width='160px'>投保日期</th>
          </thead>
          <tbody style="text-align: center">
            <tr v-for="(item,index) in tableData" :key="index">
              <td style="position: sticky;left: 0;">{{index+1}}</td>
              <td style="position: sticky;left: 84px;">{{item.name == null ? '-':item.name}}</td>
              <td style="position: sticky;left: 188px;">{{item.id_card == null ? '-':item.id_card}}</td>
              <td>{{item.nationality == null ? '-':item.nationality}}</td>
              <td>{{item.sex == 1 ? '男' : '女'}}</td>
              <td>{{item.phone == null ? '-' : item.phone}}</td>
              <td>{{item.region == null ? '-' : item.region}}</td>
              <td>{{item.residence_type == 1 ? '城镇' : '农村'}}</td>
              <td>{{item.solist.region == null ? '-' : item.solist.region}}</td>
              <td>{{item.solist.jointime == null ? '-' : item.solist.jointime}}</td>
              <td>{{item.solist.cbase == null ? '-' : item.solist.cbase}}</td>
              <td>{{item.aclist.region == null ? '-' : item.aclist.region}}</td>
              <td>{{item.aclist.jointime == null ? '-' : item.aclist.jointime}}</td>
              <td>{{item.aclist.cbase == null ? '-' : item.aclist.cbase}}</td>
              <td>{{item.colist.plan == null ? '-' : item.colist.plan}}</td>
              <td>{{item.colist.jointime == null ? '-' : item.colist.jointime}}</td>
              <!-- <td v-if="tableData.length === 0">暂无数据</td> -->
            </tr>
            <tr v-if="pageList.total === 0">
              <p style="width: 1800px;">暂无数据</p>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="display:flex;margin-top:20px;float:right">
        <span class="pageNum">共 {{pageList.total}} 条</span>
        <el-pagination
          layout="prev, pager, next"
          @current-change="current_change"
          :total="pageList.total">
        </el-pagination>
      </div>
    </div>
    <!-- 参保人管理 -->
    <div v-show='radio === 2' style="margin: 10px 46px 0px 24px;">
      <div style="display:flex;">
         <div class="block">
            <el-date-picker
              @change='DataList(dataList)'
              style="width:300px;margin-right:20px"
              v-model="dataList"
              type="daterange"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        <el-select v-model="value" placeholder="请选择" @change="typeOne(value)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value2" placeholder="请选择" @change="typeTwo(value2)">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value3" placeholder="请选择" @change="typeThree(value3)">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <input v-model="input2" placeholder="姓名/身份证号" class="inquire-input">
        <div class="inquire-div" @click="mohuchaxun(input2)">查询</div>
        <div class="import-div" @click="daochu()">导出</div>
      </div>
      <div style="margin-top:20px">
        <table border="1" cellspacing="0" style="border: none;table-layout: fixed;">
          <thead>
            <th width='180px'>时间</th>
            <th width='100px'>姓名</th>
            <th width='180px'>证件号码</th>
            <th width='100px'>国籍</th>
            <th width='100px'>性别</th>
            <th width='100px'>户口性质</th>
            <th width='100px'>业务类型</th>
            <th width='100px'>服务类型</th>
            <th width='100px'>服务状态</th>
            <th width='180px'>操作</th>
          </thead>
          <tbody style="text-align: center">
            <tr v-for="(item,index) in guanliList" :key="index">
              <td>{{item.create_time}}</td>
              <td>{{item.name}}</td>
              <td>{{item.id_card}}</td>
              <td>{{item.nationality == null ? '-':item.nationality}}</td>
              <td>{{item.sex == 1 ? '男' : '女'}}</td>
              <td>{{item.residence_type == 1 ? '城镇' : '农村'}}</td>
              <td>{{item.service_type === 1 ? '社保' : item.service_type === 2 ? '公积金' : '商保'}}</td>
              <td>{{item.handle_type === 1 ? '增员' : item.handle_type === 2 ? '减员' : '调基'}}</td>
              <td>{{item.status === 1 ? '申请中' : item.status === 2 ? '已撤回' : item.status === 3 ? '申请成功' : '申请失败'}}</td>
              <td>
                <span style="margin-right:6px" class="tbody-tr-td-span"  @click="xiangqing(item.service_type,item.handle_type,item.id_card,item.name)">详情</span>
                <span v-if="item.status === 1"  class="tbody-tr-td-span" @click="chexiao(item.service_type,item.handle_type,item.id_card)">撤销申请</span>
              </td>
            </tr>
            <tr v-if="tablelength.total === 0" width="80%">
              <p style="width: 100%;margin-left: 300%;">暂无数据</p>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="display:flex;margin-top:20px;float:right;margin-right: 412px;">
        <span class="pageNum">共 {{tablelength.total}} 条</span>
        <el-pagination
          layout="prev, pager, next"
          @current-change="current_change"
          :total="tablelength.total">
        </el-pagination>
      </div>
      <!-- 弹窗 -->
      <div>
        <el-dialog
          :title='"详情"+"（ "+dcName+" ）"'
          :visible.sync="dialogVisible"
          width="30%">
          <div style="margin-bottom: 4px;">
            <span class="el-span-list">{{dcsService == 1 ? '社保': dcsService == 2 ? '公积金' : '商保'}}</span>
            <span class="el-span-list">-</span>
            <span class="el-span-list">{{dcHandle == 1 ? '增员' :dcHandle == 2 ? '减员' : '调基'}}</span>
          </div>
          <!-- 社保-增员 -->
          <div v-if="dcsService ===1 && dcHandle === 1">
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">参保地：</span>
              <span class="el-span-list">{{dcRegion}}</span>
            </div>
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">社保参保时间：</span>
              <span class="el-span-list">{{dcJointime}}</span>
            </div>
            <div>
              <span class="el-span-list">社保基数：</span>
              <span class="el-span-list">{{dcCbase}}</span>
            </div>
          </div>
          <!-- 社保-减员 -->
          <div v-if="dcsService ===1 && dcHandle === 2">
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">减员生效时间：</span>
              <span class="el-span-list">{{dcDowntime}}</span>
            </div>
            <div>
              <span class="el-span-list">原因：</span>
              <span class="el-span-list">{{dcReason}}</span>
            </div>
          </div>
          <!-- 社保-调基 -->
          <div v-if="dcsService ===1 && dcHandle === 3">
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">原基数：</span>
              <span class="el-span-list">{{dcCbase}}</span>
            </div>
            <div>
              <span class="el-span-list">现基数：</span>
              <span class="el-span-list">{{dcS_e_cbase}}</span>
            </div>
          </div>
          <!-- 公积金增员 -->
          <div v-if="dcsService ===2 && dcHandle === 1">
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">公积金参保地：</span>
              <span class="el-span-list">{{dcA_region}}</span>
            </div>
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">公积金参加时间：</span>
              <span class="el-span-list">{{dcA_jointime}}</span>
            </div>
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">公积金基数：</span>
              <span class="el-span-list">{{dcA_cbase}}</span>
            </div>
            <div>
              <span class="el-span-list">比例：</span>
              <span class="el-span-list">个人{{dcA_s_person_ratio}}%，企业{{dcA_s_company_ratio}}%</span>
            </div>
          </div>
          <!-- 公积金 - 减员详情 -->
          <div v-if="dcsService ===2 && dcHandle === 2">
            <div>
              <span class="el-span-list">减员生效时间：</span>
              <span class="el-span-list">{{dcA_downtime}}</span>
            </div>
          </div>
          <!-- 公积金 - 调基详情 -->
          <div v-if="dcsService ===2 && dcHandle === 3">
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">现基数：</span>
              <span class="el-span-list">{{dcA_e_cbase}}</span>
            </div>
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">原基数：</span>
              <span class="el-span-list">{{dcA_s_cbase}}</span>
            </div>
            <div>
              <span class="el-span-list">新比例：</span>
              <span class="el-span-list">个人{{dcA_e_company_ratio}}%，企业{{dcA_e_person_ratio}}%</span>
            </div>
          </div>
          <!-- 商保 - 增员详情 -->
          <div v-if="dcsService ===3 && dcHandle === 1">
            <div>
              <span class="el-span-list">方案：</span>
              <span class="el-span-list">{{dcC_plan}}</span>
            </div>
          </div>
          <!-- 商保 - 减员详情 -->
          <div v-if="dcsService ===3 && dcHandle === 2">
            <div style="margin-bottom: 4px;">
              <span class="el-span-list">方案：</span>
              <span class="el-span-list">{{dcC_plan}}</span>
            </div>
            <div>
              <span class="el-span-list">减员生效时间：</span>
              <span class="el-span-list">{{dcc_downtime}}</span>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'ContentPersonsInfo',
  data(){
    return{
      personInfoList:[],
      ssbToken:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls',
      company: "1",
      page:1, // 当前页
      size:10, // 默认显示10条
      // active:'',
      radio:1,
      input:'',
      tableData:[],
      pageList:[],
      keyword:'',
      options: [
        {
          value: '',
          label: '全部'
        }, 
        {
          value: '1',
          label: '社保'
        }, 
        {
          value: '2',
          label: '公积金'
        }, 
        {
          value: '3',
          label: '商保'
        }
      ],
      options2: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '增员'
        }, 
        {
          value: '2',
          label: '减员'
        }, 
        {
          value: '3',
          label: '调基'
        }
      ],
      options3: [
        {
          value: '',
          label: '全部'
        }, 
        {
          value: '1',
          label: '申请中'
        }, 
        {
          value: '2',
          label: '已撤回'
        }, 
        {
          value: '3',
          label: '申请成功'
        }, 
        {
          value: '4',
          label: '申请失败'
        }
      ],
      value: '',
      value2: '',  
      value3: '' ,
      input2:'',
      guanliList:[],
      guanliOne:'',
      guanlitwo:'',
      guanliId:'',
      chexiaoOne:'',
      chexiaoTwo:'',
      chexiaoId:'',
      tablelength:[],
      // 参保管理
      start_time: '',
      end_time: '',
      service_type:'',
      handle_type:'',
      status:'',
      dataList:'',
      // 弹窗
      dialogVisible : false,
      dcName: 'hosam',
      dcAddress: '广州',
      dcTime: '2021-05-20',
      dcNum: '2000',
      dcsService:1, // 业务类型
      dcHandle:1, // 操作类型
      // 社保
      dcRegion:'',// 社保增员参保地
      dcJointime:'',// 社保增员参保是
      dcReason:'',// 社保减员原因
      dcDowntime:'',// 社保减员时间
      dcCbase:'',// 原基数
      dcS_e_cbase:'',//现基金
      // 公积金
      dcA_s_person_ratio:'', // 公积金个人缴纳比例
      dcA_region:'', // 公积金参保地
      dcA_s_company_ratio:'', // 公积金公司缴纳比例
      dcA_jointime:'', // 公积金参加时间
      dcA_cbase:'',// 公积金基数
      dcA_downtime:'',// 减员时间
      dcA_e_cbase:'',// 现基数
      dcA_s_cbase:'',// 原基数
      dcA_e_company_ratio:'', // 公司现比例
      dcA_e_person_ratio:'',// 个人现比例
      // 商保
      dcC_plan:'', //方案
      dcc_downtime:'' //减员时间
    }
  },
  created(){
    this.getList()
    this.getguanliList()
  },
  methods:{
    // 日期
    DataList(dataList){
      var array = dataList
      if(array !== null){
        for(var i = 0; i < this.dataList.length ; i++){
          var a = array[0];
          var b = array[1];
        }
        this.start_time = moment(a).format("YYYY-MM-DD");
        this.end_time = moment(b).format("YYYY-MM-DD");
        this.getguanliList(this.start_time,this.end_time)
      }
      if(array == null){
        this.start_time = '',
        this.end_time = ''
        console.log(this.start_time,this.end_time,'你好');
        this.getguanliList(this.start_time,this.end_time)
      }
      
    },
    // 下拉框
    typeOne(a){
      this.service_type = a;
      // console.log(this.service_type);
      this.getguanliList(this.service_type)
    },
    typeTwo(a){
      this.handle_type = a;
      console.log(this.handle_type);
      this.getguanliList(this.handle_type)
    },
    typeThree(a){
      this.status = a;
      this.getguanliList(this.status)
    },
    // 撤销申请
    chexiao(a,b,c){
      this.chexiaoOne = a;
      this.chexiaoTwo = b;
      this.chexiaoId = c;
      this.$confirm('确认撤销申请？', '撤销申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() =>{
          this.$axios.get('http://172.16.1.105:7070/shangshebao/getBack',{
            headers:{
              token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls'
            },
            params:{
              service_type : this.chexiaoOne,
              handle_type : this.chexiaoTwo,
              id_card : this.chexiaoId
            }
          }).then(res =>{
            this.getguanliList()
          }).catch(error => {
            alert(error)
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          
        }
      ).catch(function(){})    
    },
    // 详情
    xiangqing(a,b,c,d){
      this.guanliOne = a;
      this.guanlitwo = b;
      this.guanliId = c;
      this.dcName = d;
      this.$axios.post('http://172.16.1.105:7070/shangshebao/oneRecord',null,{
        headers:{
          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls'
        },
        params:{
          service_type : this.guanliOne,
          handle_type : this.guanlitwo,
          id_card : this.guanliId
        }
      }).then(res => { 
        this.dialogVisible = true
        this.dcsService = res.data.data.service_type
        this.dcHandle = res.data.data.handle_type
        this.dcRegion = res.data.data.s_region
        this.dcJointime= res.data.data.s_jointime
        this.dcCbase = res.data.data.s_cbase // 原基数
        this.dcS_e_cbase = res.data.data.s_e_cbase //现基金
        this.dcReason = res.data.data.s_reason
        this.dcDowntime = res.data.data.s_downtime
        // 公积金
        this.dcA_s_person_ratio = res.data.data.a_s_person_ratio
        this.dcA_region = res.data.data.a_region
        this.dcA_s_company_ratio = res.data.data.a_s_company_ratio
        this.dcA_jointime = res.data.data.a_jointime
        this.dcA_cbase = res.data.data.a_cbase
        this.dcA_downtime = res.data.data.a_downtime
        this.dcA_e_cbase = res.data.data.a_e_cbase
        this.dcA_s_cbase = res.data.data.a_s_cbase
        this.dcA_e_company_ratio = res.data.data.a_e_company_ratio
        this.dcA_e_person_ratio = res.data.data.a_e_person_ratio
        // 商保
        this.dcC_plan = res.data.data.c_plan
        this.dcc_downtime = res.data.data.c_downtime
        
        console.log(res);
      }).catch(error => {
        console.log(error);
      })
    },
    // 参保管理导出
    daochu(){
      this.$axios.post('http://172.16.1.105:7070/shangshebao/exportRecordExcel',null,{
        headers:{
          token: this.ssbToken
        },
        params:{
          company_id : this.company,
          page : this.page,
          size : this.size,
          keyword : this.keyword,
          start_time : this.start_time,
          end_time : this.end_time,
          service_type : this.service_type,
          handle_type : this.handle_type,
          status : this.status
        },
        responseType: 'blob'
      }).then(res =>{
        const data = res.data
        const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '参保管理') 
       //注意：上面的self.$route.query.type是你要下载的文件名加文件后缀，例如test.docx
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(error =>{
        console.log(error);
      })
    },
    // 参保人导出
    xiazai(){
      this.$axios.post('http://172.16.1.105:7070/shangshebao/exportPersonExcel',null,{
        headers:{
          token: this.ssbToken
        },
        params:{
          company_id : this.company,
          page : this.page,
          size : this.size,
          keyword : this.keyword
        },
        responseType: 'blob'
      }).then(res =>{
        const data = res.data
        const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '参保人') 
       //注意：上面的self.$route.query.type是你要下载的文件名加文件后缀，例如test.docx
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(error =>{
        console.log(error);
      })
    },
    changeTheme(val){
      console.log(val);
    },
    getList(){
      this.$axios.post('http://172.16.1.105:7070/shangshebao/personInfo',null,{
        headers:{
          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls'
        },
        params:{
          company_id : this.company,
          page : this.page,
          size : this.size,
          keyword : this.keyword
        }
      }).then(res => {
          this.tableData = res.data.data
          this.pageList = res.data.pageList
      }).catch(error => {
        console.log(error);
      })
    },
    // 参保管理
    getguanliList(){
      this.$axios.post('http://172.16.1.105:7070/shangshebao/getRecord',null,{
        headers:{
          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls'
        },
        params:{
          company_id : this.company,
          page : this.page,
          size : this.size,
          keyword : this.keyword,
          start_time : this.start_time,
          end_time	: this.end_time,
          service_type : this.service_type,
          handle_type : this.handle_type,
          status : this.status
        }
      }).then(res => {
        this.guanliList = res.data.data
        this.tablelength = res.data.pageList
        // console.log(res);
      }).catch(error => {
        console.log(error);
      })
    },
    current_change(currentPage){
      this.page = currentPage;
      this.getList(this.page)
    },
    chaxun(input){
      this.keyword = input;
      this.getList(this.keyword)
    },
    mohuchaxun(input2){
      this.keyword = input2;
      this.getguanliList(this.keyword)
    }
  }

}

</script>

<style scoped>
  .ContentPersonsInfo{
    /* width: 1200px; */
    height: 800px;
    background: #FFFFFF;
    box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    margin-right: 22px;
  }
  .header-title{
    height: 68px;
    border-bottom: #D9D9D9 solid 1px;
    font-size: 18px;
    font-family: "PingFangSC-Semibold", "PingFang SC";
    font-weight: 600;
    color: #615F66;
    line-height: 68px;
    padding-left: 24px;
  }
  .inquire-input{
    width: 166px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #D9D9D9;
    padding-left: 10px;
  }
  .inquire-div{
    width: 60px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #D9D9D9;
    /* border: 1px solid #7A5FF7; */
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #615F66;
    line-height: 32px;
    text-align: center;
    margin-left: 20px;
    cursor:pointer
  }
  .import-div{
    width: 60px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #E8EAEC;
    border-radius: 3px;
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #615F66;
    line-height: 32px;
    text-align: center;
    margin-left: 10px;
    cursor:pointer
  }
  .inquire-input:hover,
  .inquire-div:hover,
  .import-div:hover{
    border: 1px solid #7A5FF7;
    color: #7A5FF7;
  }
  .inquire-input:focus{
    outline: none;
  }
  th{
    border: none;
    border: 1px solid #E8EAEC;
    height: 42px;
    background: #F8F8F9;
    font-size: 14px;
    font-family: "PingFangSC-Semibold", "PingFang SC";
    font-weight: 600;
    color: #515A6E;
    line-height: 20px;
  }
  td{
    height: 42px;
    border: 1px solid #E8EAEC;
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #515A6E;
    line-height: 20px;
    background: #FFFFFF;
  }
  /* th{
    position: sticky;
    left:0px;
    } */
  .pageNum{
    font-size: 13px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    line-height: 34px;
    font-weight: 400;
    color: #343434;
  }
  div >>> .el-input__inner{
    width: 120px;
    height: 36px;
    border-radius: 3px;
    border: 1px solid #DCDEE2;
  }
  div >>> .el-select{
    margin-right: 20px;
  }
  .tbody-tr-td-span{
    font-size: 14px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    color: #7A5FF7;
    cursor:pointer
  }
  div >>> .el-dialog__wrapper{
    margin: 0 auto;
  }
  div >>> .el-dialog{
    /* width: 15%; */
    width: 300px !important;
    height: 200px !important;
    background: #FFFFFF !important;
    border-radius: 4px !important;
  }
  div >>> .el-dialog__header{
    border-bottom: 1px #D9D9D9 solid;
  }
  div >>> .el-dialog__title{
    font-size: 14px;
    font-family: 'PingFangSC-Semibold', 'PingFang SC';
    font-weight: 600;
    color: #615F66;
  }
  div >>>  .el-dialog__body{
    padding: 10px 20px 10px 20px !important;
  }
  .el-span-list{
    font-size: 12px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    color: #615F66;
  }
</style>
